<template>
	<rootWithStateBarLayout>
		<view slot="pageContent" class="content-lay flex-v">
			<view class="head-lay flex-h">
				<view class="head-title">{{$t('thickSetting.title')}}</view>
				<view class="head-left flex-h">
					<view class="head-tool" @click="onBackClick">
						<image class="head-icon" src="@/static/imgs/tools/icon_nav_back_dark@2x.png"></image>
					</view>
				</view>
			</view>

<!-- :style="'height:' + contentLayHeight" -->
			<view class="s-content-lay flex-h" >
				<view class="contents flex-h">
					<view class="left-content">
						<view :class="'left-menu-item ' + (leftMenuSelectId == item.id ? 'select-item' :'') "
							v-for="(item , index) in leftMenuData" :key="index" @click="onLeftMenuClick(index)">
							{{item.title}}
						</view>
					</view>

					<view class="right-content" v-if="leftMenuSelectId == 0 && showTempContent">
						<checkbox-group class="page-line flex-h" style="margin-top: 10upx;" @change="onCbChange">
							<view class="line-element flex-h" style="width: 50%;background-color:#F6F6F6;">
								<checkbox value="cb0" :checked="cbUseTmprCrct"></checkbox>
								{{$t("thickSetting.tempTemperatureCheckUse")}}
							</view>

							<view class="line-element flex-h" style="width: 50%;background-color:#F6F6F6;">
								<checkbox value="cb1" :checked="cbMtrClsWrng"></checkbox>
								{{$t("thickSetting.materialDiffExpress")}}
							</view>
						</checkbox-group>

						<view style="height: 1px; background-color:#EAEAEA;width: 100; margin: 15upx 0;"></view>

						<view>
							<view class="page-line flex-h">
								<view class="line-title">
									{{$t("public.carbonSteelStr")}}
								</view>
							</view>

							<view class="page-line flex-h">
								<view class="line-title">
									{{$t("thickSetting.correctApplicableValue")}}
								</view>

								<view class="line-element flex-h">
									<input class="value_input" v-model="defaultBaseTempForCarbon" />
									{{$t("thickSetting.tempAboveValue")}}
								</view>
							</view>

							<view class="page-line flex-h">
								<view class="line-title">
									{{$t("thickSetting.correctFormula")}}
								</view>

								<view class="line-element flex-h">
									Tm =
									<input class="formula_input" v-model="defaultCalFormulaForCarbon" />
								</view>
							</view>
						</view>

						<view style="height: 1px; background-color:#EAEAEA;width: 100; margin: 15upx 0;"></view>

						<view>
							<view class="page-line flex-h">
								<view class="line-title">
									{{$t("public.carbonSteelExceptStr")}}
								</view>
							</view>

							<view class="page-line flex-h">
								<view class="line-title">
									{{$t("thickSetting.correctApplicableValue")}}
								</view>

								<view class="line-element flex-h">
									<input class="value_input" v-model="defaultBaseTempForCarbonEx" />
									{{$t("thickSetting.tempAboveValue")}}
								</view>
							</view>

							<view class="page-line flex-h">
								<view class="line-title">
									{{$t("thickSetting.correctFormula")}}
								</view>

								<view class="line-element flex-h">
									Tm =
									<input class="formula_input" v-model="defaultCalFormulaForCarbonEx" />
								</view>
							</view>
						</view>

						<view style="height: 1px; background-color:#EAEAEA;width: 100; margin: 15upx 0;"></view>

						<view>
							<view class="page-line">
								<view class="line_tip">
									<text>{{$t("thickSetting.setTip")}}</text>
								</view>
							</view>

						</view>

						<view class="page-line flex-h" style="justify-content: space-around; margin-top: 20rpx;">
							<button class="btn-ok" @click="onConfirmClick">{{$t("public.confirm")}}</button>
							<button class="btn-cancel" @click="onCancelClick">{{$t("public.cancel")}}</button>
						</view>
					</view>
				</view>
			</view>

		</view>
	</rootWithStateBarLayout>
</template>

<script>
	import rootWithStateBarLayout from "@/_components/rootWithStateBarLayout.vue";
	import {
		requireConfigByCls,
		updateConfigByKeys
	} from "@/localService/configService.js";

	export default {
		components: {
			rootWithStateBarLayout
		},

		data() {
			let _self = this;
			return {
				contentLayHeight: 0,
				leftMenuData: [{
					id: 0,
					title: _self.$t('thickSetting.leftMenu.temperatureSetting')
				}],
				leftMenuSelectId: 0,

				showTempContent: false,
				thickDataList: [],
				defaultBaseTempForCarbon: '',
				defaultCalFormulaForCarbon: '',
				defaultBaseTempForCarbonEx: '',
				defaultCalFormulaForCarbonEx: '',
				// ChkMtrClsWrng:right   ChkUseTmprCrct:left
				cbUseTmprCrct: false, // left
				cbMtrClsWrng: false, // right
			};
		},

		onReady() {
			let view = uni.createSelectorQuery().in(this).select('.head-lay')
			let _this = this;
			view.fields({
				size: true, //是否返回节点尺寸（width height）
				rect: true, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
				scrollOffset: true, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
			}, (res) => {
				_this.contentLayHeight = (uni.getSystemInfoSync().windowHeight - res.bottom - 30) + 'px';
			}).exec();

			this.requireConfigByClsApi();
		},

		methods: {
			onBackClick() {
				uni.navigateBack();
			},

			updateConfigByKeysApi(inObj) {
				uni.showLoading();
				updateConfigByKeys(inObj).then(e => {
					uni.hideLoading();
					console.log("updateConfigByKeysApi")
					console.log(e)
				});
			},

			requireConfigByClsApi() {
				let _self = this;
				requireConfigByCls("thick").then(e => {
					console.log("requireConfigByClsApi")
					_self.thickDataList = e;
					console.log(e)

					_self.thickDataList.forEach(elem => {
						if (elem.cfg_key == "JNmTeBdryCs")
							_self.defaultBaseTempForCarbon = elem.cfg_value;
						else if (elem.cfg_key == "TxtFormulaCs")
							_self.defaultCalFormulaForCarbon = elem.cfg_value;
						else if (elem.cfg_key == "JNmTeBdrySus")
							_self.defaultBaseTempForCarbonEx = elem.cfg_value;
						else if (elem.cfg_key == "TxtFormulaSus")
							_self.defaultCalFormulaForCarbonEx = elem.cfg_value;

						else if (elem.cfg_key == "ChkUseTmprCrct")
							_self.cbUseTmprCrct = elem.cfg_value == "True";
						else if (elem.cfg_key == "ChkMtrClsWrng")
							_self.cbMtrClsWrng = elem.cfg_value == "True";
					})

					console.log(_self.defaultBaseTempForCarbon)
					console.log(_self.defaultCalFormulaForCarbon)
					console.log(_self.defaultBaseTempForCarbonEx)
					console.log(_self.defaultCalFormulaForCarbonEx)
					console.log(_self.cbUseTmprCrct)
					console.log(_self.cbMtrClsWrng)

					// ChkMtrClsWrng:right   ChkUseTmprCrct:left
					_self.showTempContent = true;
				})
			},

			/**
			 * 保存设置项
			 */
			onConfirmClick() {
				let tempObj = {};
				tempObj.JNmTeBdryCs = this.defaultBaseTempForCarbon;
				tempObj.TxtFormulaCs = this.defaultCalFormulaForCarbon;

				tempObj.JNmTeBdrySus = this.defaultBaseTempForCarbonEx;
				tempObj.TxtFormulaSus = this.defaultCalFormulaForCarbonEx;

				tempObj.ChkUseTmprCrct = this.cbUseTmprCrct ? "True" : "False";
				tempObj.ChkMtrClsWrng = this.cbMtrClsWrng ? "True" : "False";

				this.updateConfigByKeysApi(tempObj);
			},

			onCancelClick() {
				uni.navigateBack();
			},

			onCbChange(e) {
				let _self = this;
				console.log("onCbChange")
				console.log(e.target.value)
				// e.target.value.forEach(subE => {
				// 	console.log("cb0 " + subE.indexOf("cb0"))
				// 	console.log("cb1 " + subE.indexOf("cb1"))
				// 	if(subE.indexOf("cb0") != -1)
				// 		_self.cbUseTmprCrct = true;
				// 	else 
				// 		_self.cbUseTmprCrct = false;

				// 	if(subE.indexOf("cb1") != -1)
				// 		_self.cbMtrClsWrng = true;
				// 	else 
				// 		_self.cbMtrClsWrng = false;					
				// })
				let temp0 = e.target.value.findIndex(subE => {
					return subE == "cb0";
				});

				let temp1 = e.target.value.findIndex(subE => {
					return subE == "cb1";
				})
				
				console.log(temp0)
				console.log(temp1)

				if (temp0 >= 0)
					_self.cbUseTmprCrct = true;
				else
					_self.cbUseTmprCrct = false;

				if (temp1 >= 0)
					_self.cbMtrClsWrng = true;
				else
					_self.cbMtrClsWrng = false;

				// multiplesStatus = multiples.findIndex((item) => {
				// 	return this.dateEqual(item, nowDate)
				// })
				console.log(`onCbChange ${this.cbUseTmprCrct} ${this.cbMtrClsWrng}`)
			}
		}
	}
</script>

<style lang="scss">
	.content-lay {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
	}

	.head-lay {
		height: 40rpx;
		position: relative;
		padding: 5upx;
		box-sizing: border-box;	
		background-color: #FFFFFF;
		align-items: center;

		.head-title {
			margin: 0 auto;
			font-size: 25rpx;
			font-weight: bold;
			color: #333333;
		}

		.head-right {
			position: absolute;
			right: 0;
			height: 100%;
			align-items: center;
		}

		.head-left {
			position: absolute;
			left: 0;
			height: 100%;
			align-items: center;
		}

		.head-tool {
			font-size: 18upx;
			color: #333333;
			margin-right: 10upx;
		}

		.head-icon {
			width: 30upx;
			height: 30upx;
		}
	}

	.s-content-lay {
		width: 100%;
		height: 100%;
		// background-color: #007AFF;
		box-sizing: border-box;
		padding: 15upx;

		.contents {
			background-color: #fff;
			width: 100%;
			height: 100%;
		}

		.left-content {
			width: 40%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid #CFD3D5;

			.left-menu-item {
				color: #000;
				padding: 10upx;
				margin: 10upx 10upx -10upx 10upx;
				border: 1px solid #CFD3D5;
			}

			.select-item {
				background-color: #0062B0;
				color: #fff;
			}
		}

		.right-content {
			width: 60%;
			height: 100%;
			background-color: #fff;
			padding: 0upx 30upx;

			.page-line {
				width: 100%;
				align-items: center;

				.line-element {
					width: 80%;
					align-items: center;
					padding: 10upx;

					.value_input {
						width: 50rpx;
						margin: rpx 10rpx;
						padding: 5rpx;
						border: 1px solid #CFD3D5;
					}

					.formula_input {
						width: 80%;
						margin: 0rpx 10rpx;
						padding: 5rpx;
						border: 1px solid #CFD3D5;
					}
				}

				.line-title {
					width: 20%;
					font-size: 18upx;
					color: #999990;
				}

				.checkbox-str {
					font-size: 18upx;
					color: #999999;
				}

				.info-picker {
					;
					padding: 5upx 5upx;
					border: 1px solid #CFD3D5;
				}

				.line_tip {
					padding: 5rpx;
					border: 1px solid #CFD3D5;
					background-color: #C0C0C0;
					color: #000;
				}
			}
		}
	}
</style>
